<template>
  <view class="question-item">
    <text class="title text-ellipsis">{{data.title}}</text>
    <view class="foot space-between">
      <view class="info-left">
        <text>{{data.reply}} 回答 · </text>
        <text>{{data.viewCount}} 浏览</text>
      </view>
      <view class="info-right">
        <text>{{data.nickName}} ·</text>
        <text>{{data.updateDate}}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {reactive,getCurrentInstance} from 'vue'
  const props = defineProps({
    item:{
      type:Object
    }
  })
  let data = reactive({})
  data = props.item
  const {proxy} = getCurrentInstance()
  data.updateDate = proxy.$utils.dateFormat(data.updateDate)
</script>

<style lang="scss" scoped>
  .text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  
  .question-item{
    padding: 30rpx;
    border-bottom: 1rpx solid #f1f1ff;
    min-width: 80rpx;
    .title{
      font-size: 33rpx;
      font-weight: bold;
    }
    .foot{
      text{
        font-size: 26rpx;
        color: #999;
        padding-right: 10rpx;
      }
    }
  }
</style>